<template>
	<view>
		<!-- 定时按钮 -->
		<view class="tim_action_view" @click="countdownButtonClick()">
			<text class="tim_button alifonts icon-dingshi"></text>
			<uni-countdown ref="countdownTimer" :show-day="false" :minute="countdownTimeMinutes" @timeup="countdownComplete()" color="#FFFFFF" backgroundColor=$zm-main-color splitorColor="#FFFFFF" zmFontSize="30rpx"></uni-countdown>
		</view>
		<!-- 底部的操作按钮 -->
		<view class="operator_view">
			<uni-icons class="music_list" type="list" size="30" color="#FFFFFF" @click="musicListButtonClick()"></uni-icons>
			<view class="music_play_button" @click="resetNapClick()">开始小憩</view>
			<uni-icons class="music_setting" type="gear" size="30" color="#FFFFFF" @click="musicSettingButtonClick()"></uni-icons>
		</view>
		<!-- 背景动画 -->
		<view class="scan_animation_view">
			<view class="avatar"></view>
			<view class="inner"></view>
			<view class="inner outter"></view>
			<view class="inner outter1"></view>
			<view class="inner outter2"></view>
		</view>
		<!-- 时间选择弹框 -->
		<uni-popup ref="timingPopup" type="center" :mask-click="false">
			<view class="timing_pop_back_view">
				<!-- 时间选择器 -->
				<picker-view class="picker-view" indicator-style="height: 50px;" :value="[6]" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
				<!-- 确定、取消按钮 -->
				<view class="timing_pop_action_view">
					<view class="timing_pop_button timing_pop_cancel" @click="timingPopupCancelClick()">取消</view>
					<view class="timing_pop_button timing_pop_sure" @click="timingPopupSureClick()">确定</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 时间列表选择 */
				minutes: [1,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105,110,115,120],
				/* 当前选择的时间 */
				currentSelectedMinutes: 30,
				/* 倒计时UI上显示的倒计时时间 */
				countdownTimeMinutes: 30,
			};
		},
		onLoad() {
			
		},
		onReady() {
			this.countdownButtonClick();
		},
		methods:{
			/* 选择小憩音频列表 */
			musicListButtonClick() {
				uni.navigateTo({
					url:"../napMusicList/napMusicList"
				});
			},
			
			/* 开始小憩/结束小憩 */
			resetNapClick() {
				
			},
			
			/* 音频设置，闹钟 */
			musicSettingButtonClick() {
				uni.navigateTo({
					url:"../napsettings/napsettings"
				});
			},
			
			/* 当前选择的时间 */
			bindChange(e) {
				this.currentSelectedMinutes = this.minutes[e.detail.value];
			},
			
			/* 时间选择弹框取消按钮点击 */
			timingPopupCancelClick() {
				this.$refs.timingPopup.close();
			},
			
			/* 时间选择弹框确认按钮点击 */
			timingPopupSureClick() {
				this.$refs.timingPopup.close();
				this.countdownTimeMinutes = this.currentSelectedMinutes;
			},
			
			/* 倒计时按钮点击 */
			countdownButtonClick() {
				this.$refs.timingPopup.open();
			},
			
			/* 倒计时结束 */
			countdownComplete() {
				
			},
			
		}
	}
</script>

<style lang="scss">
	/* 定时按钮 */
	.tim_action_view {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tim_button {
		margin: 20rpx;
		font-size: 60rpx;
		color: #FFFFFF;
	}
	
	/* 底部的操作按钮 */
	.operator_view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		// 距离底部布局
		position: absolute;
		bottom: 150rpx;
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		border-radius: 10rpx;
	}

	.music_list {
		color: #FFFFFF;
	}
	
	.music_play_button {
		width: 250rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #FFFFFF;
		color: #2B2B2B;
		border-radius: 20rpx;
		text-align: center;
		font-size: 36rpx;
	}
	
	.music_setting {
		color: #FFFFFF;
	}
	
	// ========= 时间选择 ======//
	.timing_pop_back_view {
		background-color: #FFFFFF;
		border-radius: 30rpx;
	}
	.picker-view {
		margin: 20rpx;
	    width: 620rpx;
	    height: 480rpx;
	}
	.item {
	    height: 50px;
		line-height: 50px;
	    text-align: center;
		font-size: 36rpx;
	}
	
	.timing_pop_action_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}
	
	.timing_pop_button {
		width: 150rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
	
	.timing_pop_cancel {
		background-color: #C0C0C0;
		margin-left: 100rpx;
	}
	
	.timing_pop_sure {
		background-color: #FF4040;
		margin-right: 100rpx;
	}
	
	
	// ======== 动画 =====//
	.scan_animation_view {
		position: fixed;
		width: 100%;
		height: 100rpx;
		top: 40%;
		z-index: -1;
	}
	
	.avatar {
		position: fixed;
		left: 50%;
		margin-left: -40rpx;
		margin-top: 10rpx;
		border-radius: 100%;
		width: 80rpx;
		height: 80rpx;
		background-color: #aabdaf;
		z-index: -1;
	}
	
	.inner {
		width: 100rpx;
		height: 100rpx;
		background: #aabdaf;
		border-radius: 50%;
		position: fixed;
		left: 50%;
		margin-left: -50rpx;
		z-index: -2;
		animation-duration: 8s;
		animation-name: stateAnimation;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		opacity: 0;
	}
	
	@keyframes stateAnimation {
		0% {
			opacity: .5;
			transform: scale(1);
		}
	
		100% {
			opacity: 0;
			transform: scale(8);
		}
	}

	.outter {
		animation-delay: 2s;
	}
	
	.outter1 {
		animation-delay: 4s;
	}
	
	.outter2 {
		animation-delay: 6s;
	}
	
	
</style>
